<template>
  <div class="shelf-title-wrapper" v-show="shelfTitleVisible" :class="{'hide-shadow' : ifHideShadow}">
    <div class="shelf-title-text-wrapper" @click="back" v-if="showBack">
      <span class="icon-back"></span>
    </div>
    <div class="shelf-title-text-wrapper"  @click="changeGroup" v-if="showChangeGroup">
      <span class="shelf-title-btn-text" :class="{'shelf-title-text-right' : emptyCategory}">{{$t('shelf.editGroup')}}</span>
    </div>
    <!--  -->
    <div class="shelf-title-btn-wrapper" v-if="showClear">
      <span class="shelf-title-btn-text" @click="clearCache">{{ $t('shelf.clearCache') }}</span>
    </div>
    <div class="shelf-title-text-wrapper" v-if="showTitle">
      <span class="shelf-title-text">{{title}}</span>
      <span class="shelf-title-sub-text" v-show="this.isEditMode">{{
        selectedText
      }}</span>
    </div>
    <div class="shelf-title-btn-wrapper" v-if="showEdit">
      <span class="shelf-title-btn-text" @click="onEditClick">{{
        isEditMode ? $t('shelf.cancel') : $t('shelf.edit')
      }}</span>
    </div>
  </div>
</template>

<script>
import { clearLocalForage } from '../../utils/localForage'
import { clearLocalStorage, saveBookShelf } from '../../utils/localStorage'
import { storeShelfMixin } from '../../utils/mixin'
export default {
  // {{ $t('shelf.title') }}
  mixins: [storeShelfMixin],
  props: {
    title: String,
    ifShowBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ifHideShadow: true
    }
  },
  watch: {
    offsetY(v) {
      if (v > 0) {
        this.ifHideShadow = false
      } else {
        this.ifHideShadow = true
      }
    }
  },
  computed: {
    showTitle() {
      return this.currentType === 1 || !this.emptyCategory
    },
    // 书架为空情况
    emptyCategory() {
      return !this.shelfCategory || !this.shelfCategory.itemList || this.shelfCategory.itemList.length === 0
    },
    showEdit() {
      return this.currentType === 1 || !this.emptyCategory
    },
    selectedText() {
      const selectedNumber = this.shelfSelected ? this.shelfSelected.length : 0
      return selectedNumber <= 0
        ? this.$t('shelf.selectBook')
        : (selectedNumber === 1
          ? this.$t('shelf.haveSelectedBook').replace('$1', selectedNumber)
          : this.$t('shelf.haveSelectedBooks').replace('$1', selectedNumber))
    },
    showBack() {
      return this.currentType === 2 && !this.isEditMode
    },
    showChangeGroup() {
      return this.currentType === 2 && (this.isEditMode || this.emptyCategory)
    },
    showClear() {
      return this.currentType === 1
    },
    popupCancelBtn() {
      return this.createPopupBtn(this.$t('shelf.cancel'), () => {
        this.hidePopup()
      })
    }
  },
  methods: {
    onComplete() {
      this.hidePopup()
      this.setShelfList(this.shelfList.filter(book => book.id !== this.shelfCategory.id))
        .then(() => {
          saveBookShelf(this.shelfList)
          this.$router.go(-1)
          this.setIsEditMode(false)
        })
    },
    // 删除分组
    deleteGroup() {
      // 当前的书架不为空的情况
      if (!this.emptyCategory) {
        this.onComplete()
      } else {
        this.onComplete()
      }
    },
    changeGroupName() {
      this.hidePopup()
      this.dialog({
        showNewGroup: true,
        groupName: this.shelfCategory.title
      }).show()
    },
    hidePopup() {
      this.popupMenu.hide()
    },
    createPopupBtn(text, onClick, type = 'normal') {
      return {
        text: text,
        type: type,
        click: onClick
      }
    },
    showDeleteGroup() {
      // 这里的hide是有0.2秒的过渡动画的
      // 而show 是直接显示的
      // 解决先显示后消失的问题 定时器
      this.hidePopup()
      setTimeout(() => {
        this.popupMenu = this.popup({
          title: this.$t('shelf.deleteGroupTitle'),
          btn: [
            this.createPopupBtn(this.$t('shelf.confirm'), () => {
              // 删除分组操作
              this.deleteGroup()
            }, 'danger'),
            this.createPopupBtn(this.$t('shelf.cancel'), () => {
              this.hidePopup()
            })
          ]
        }).show()
      }, 200)
    },
    changeGroup() {
      this.popupMenu = this.popup({
        btn: [
          this.createPopupBtn(this.$t('shelf.editGroupName'), () => {
            this.changeGroupName()
          }),
          this.createPopupBtn(this.$t('shelf.deleteGroup'), () => {
            this.showDeleteGroup()
          }, 'danger'),
          this.popupCancelBtn
        ]
      }).show()
    },
    // 编辑
    onEditClick() {
      // 当不是编辑模式时
      if (!this.isEditMode) {
        this.setShelfSelected([])
        this.shelfList.forEach(item => {
          item.selected = false
          if (item.itemList) {
          // 将 Category 里面 selected = false
            item.itemList.forEach(subItem => {
              subItem.selected = false
            })
          }
        })
        // this.shelfCategory.itemList.forEach(item => {
        // item.selected = false
        // })
      }
      this.setIsEditMode(!this.isEditMode)
    },
    // 清除缓存
    clearCache() {
      clearLocalStorage()
      clearLocalForage()
      this.setShelfList([])
      this.setShelfSelected([])
      this.getShelfList()
      this.simpleToast(this.$t('shelf.clearCacheSuccess'))
    },
    back() {
      this.$router.go(-1)
      // 修改 当编辑状态时点击返回 仍然是编辑状态bug
      this.setIsEditMode(false)
    }
  }
}
</script>

<style lang='scss' scopde>
@import '../../assets/style/global.scss';
.shelf-title-wrapper {
  position: absolute;
  width: 100%;
  height: px2rem(40);
  display: flex;
  box-sizing: border-box;
  z-index: 130;
  // padding-top: px2rem(10);
  background: white;
  box-shadow: 0 px2rem(2) px2rem(2) rgba(0, 0, 0, .2);
  &.hide-shadow {
    box-shadow: none;
  }
  .shelf-title-text-wrapper {
    @include center;
    flex-direction: column;
    flex: 0 0 33.33%;
    .shelf-title-text {
      font-size: px2rem(16);
      font-weight: bold;
      color: #333;
    }
    .shelf-title-btn-text {
      font-size: px2rem(14);
      color: #333;
      &.shelf-title-text-right {
        width: 33.33%;
        text-align: center;
        position: absolute;
        right: 0;
      }
    }
    .shelf-title-sub-text {
      font-size: px2rem(13);
    }
    .icon-back {
      font-size: px2rem(20);
      padding-right: px2rem(40);
    }
    .shelf-title-edit {
      font-size: px2rem(14)
    }
  }
  .shelf-title-btn-wrapper {
    @include center;
    flex: 0 0 33.33%;
    .shelf-title-btn-text {
      font-size: px2rem(14);
      color: #666;
    }
  }
}
</style>
